import echarts from 'echarts';
<template>
  <div class="item">
    <div class="content_wrapper" v-for="(item, index1) in data" :key="index1">
      <div class="title">{{ item.title }}</div>
      <div class="tag_wrapper">
        <div
          v-for="(tagname, index2) in item.tags"
          :key="index2"
          class="tag_item"
        >
          <Tag
            size="large"
            :class="{ cur: iscur == index2 }"
            @click.native="(iscur = index2), tagClick(index1, index2)"
            >{{ tagname }}</Tag
          >
        </div>
      </div>
    </div>
    <Button type="error" long>下一步</Button>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      default: [
        {
          title: "选择商品",
          tags: ["汽油", "柴油"]
        },
        {
          title: "选择油耗",
          tags: ["98#", "95#", "92#"]
        },
        {
          title: "选择油枪",
          tags: ["2号", "4号", "6号", "8号", "10号"]
        }
      ]
    }
  },
  data() {
    return {
      red: "default",
      iscur: 0
    };
  },
  methods: {
    colorChange() {
      console.log("tag item");
      this.$emit("colorChange");
    },
    tagClick(index1, index2) {
      console.log(index1, index2);
    }
  }
};
</script>

<style scoped lang="stylus">
.item {
  font-size: 16px;
}

.content_wrapper {
  margin-bottom: 20px;
}

.tag_wrapper {
  display: flex;
  margin-top: 10px;

  .tag_item {
    margin-right: 10px;
  }
}

.cur {
  background: #fff1f0;
  border-color: #ffa39e;
  color: red;
}
</style>
